<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ArduPilot PID Review</title>
<link rel="icon" href="../images/AP_favicon.png">
<script src='../modules/plotly.js/dist/plotly.min.js'></script>
<script src='../modules/fft.js/dist/fft.js'></script>
<script type="text/javascript" src="PIDReview.js"></script>
<script type="text/javascript" src="../Libraries/Array_Math.js"></script>
<script type="text/javascript" src="../Libraries/fft.js"></script>
<script type="text/javascript" src="../Libraries/OpenIn.js"></script>
<script type="text/javascript" src="../Libraries/LoadingOverlay.js"></script>
<script type="text/javascript" src="../Libraries/Plotly_helpers.js"></script>
<script type="text/javascript" src="../Libraries/LogHelpers.js"></script>

<script src="../modules/build/floating-ui/dist/umd/popper.min.js"></script>
<script src="../modules/build/tippyjs/dist/tippy-bundle.umd.min.js"></script>

</head>
<table style="width:1200px"><tr><td>
    <a href="https://ardupilot.org"><img src="../images/ArduPilot.png"></a>
</td><td>
    <a href="https://github.com/ArduPilot/WebTools"><img src="../images/github-mark.png" style="width:60px"></a>
    <br>
    <a href="https://github.com/ArduPilot/WebTools"><img src="../images/GitHub_Logo.png" style="width:60px"></a>
</td></tr></table>

<table><tr><td style="width:1200px">
<h1 style="text-align:center"><a href="" style="color: #000000; text-decoration:none;">ArduPilot PID Review Tool</a></h1>
</td></tr></table>

<body>

<style>
    div.plotly-notifier {
        visibility: hidden;
    }
</style>

<table>
<tr>
<td style="width: 30px;"></td>
<td>
<fieldset style="width:1100px">
    <legend>Setup</legend>
    <table>
        <td>
            <fieldset style="width:200px;height:80px">
                <legend>FFT Settings</legend>
                <table>
                    <td style="width: 125px;">
                        <label for="FFTWindow_size">Window size</label>
                    </td>
                    <td>
                        <input id="FFTWindow_size" name="FFTWindow_size" type="number" min="1" step="1" value="512" onchange="window_size_inc(event); clear_calculation()" style="width:50px"/>
                    </td>
                </table>
            </fieldset>
        </td>
        <td>
            <fieldset style="width:200px;height:80px">
                <legend>Analysis time</legend>
                <label for="TimeStart">Start (s)</label>
                <input id="TimeStart" name="TimeStart" type="number" min="0" step="1" value="0" onchange="time_range_changed()" style="width:50px"/><br><br>
                <label for="TimeEnd">End (s)</label>
                <input id="TimeEnd" name="TimeEnd" type="number" min="0" step="1" value="0" onchange="time_range_changed()" style="width:50px"/>
            </fieldset>
        </td>
        <td>
            <fieldset style="width:300px;height:80px">
                <legend>Axis</legend>
                <table>
                    <td>
                        <input type="radio" id="type_RATE_R" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_RATE_R">RATE Roll</label><br>
                        <input type="radio" id="type_RATE_P" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_RATE_P">RATE Pitch</label><br>
                        <input type="radio" id="type_RATE_Y" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_RATE_Y">RATE Yaw</label><br>
                    </td>
                    <td>
                        <input type="radio" id="type_PIDR" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_PIDR">PIDR</label><br>
                        <input type="radio" id="type_PIDP" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_PIDP">PIDP</label><br>
                        <input type="radio" id="type_PIDY" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_PIDY">PIDY</label><br>
                    </td>
                    <td>
                        <input type="radio" id="type_PIQR" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_PIQR">PIQR</label><br>
                        <input type="radio" id="type_PIQP" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_PIQP">PIQP</label><br>
                        <input type="radio" id="type_PIQY" name="Axis" onchange="loading_call(setup_axis)">
                        <label for="type_PIQY">PIQY</label><br>
                    </td>
                </table>
            </fieldset>
        </td>
        <td style="width: 10px;"></td>
        <td>
            <input id="fileItem" type="file" accept=".bin" onchange="readFile(this)"><br><br>
            <input id="OpenIn" type="button" value="Open In" disabled>
            <br><br>
            <input type="button" id="calculate" value="Calculate" onclick="loading_call(re_calc)">
        </td>
    </table>
</fieldset>
</td>
</tr>
</table>

<table><tr><td style="width:1200px">
    <h2 style="text-align:center">Flight Data</h2>
</td></tr></table>

<div id="FlightData" style="width:1200px;height:450px"></div>

<table><tr><td style="width:1200px">
    <h2 style="text-align:center">Time domain</h2>
</td></tr></table>

<div id="TimeInputs" style="width:1200px;height:450px"></div>
<div id="TimeOutputs" style="width:1200px;height:450px"></div>

<table><tr><td style="width:1200px">
    <h2 style="text-align:center">Frequency domain</h2>
</td></tr></table>

<table>
    <tr>
        <td style="width: 50px;"></td>
        <td>
            <fieldset style="width:300px">
                <legend>PID</legend>
                <p>
                    <fieldset style="width:300px">
                        <legend ondblclick="update_hidden(this)">Inputs</legend>
                        <input type="checkbox" id="PIDX_Tar" onchange="update_hidden(this)">
                        <label for="PIDX_Tar">Target</label>

                        <input type="checkbox" id="PIDX_Act" onchange="update_hidden(this)">
                        <label for="PIDX_Act">Actual</label>

                        <input type="checkbox" id="PIDX_Err" onchange="update_hidden(this)">
                        <label for="PIDX_Err">Error</label>
                    </fieldset>
                </p>
                <p>
                    <fieldset style="width:300px">
                        <legend ondblclick="update_hidden(this)">Components</legend>
                        <input type="checkbox" id="PIDX_P" onchange="update_hidden(this)">
                        <label for="PIDX_P">P</label>

                        <input type="checkbox" id="PIDX_I" onchange="update_hidden(this)">
                        <label for="PIDX_I">I</label>

                        <input type="checkbox" id="PIDX_D" onchange="update_hidden(this)">
                        <label for="PIDX_D">D</label>

                        <input type="checkbox" id="PIDX_FF" onchange="update_hidden(this)">
                        <label for="PIDX_FF">FF</label>
                    </fieldset>
                </p>
                <p>
                    <fieldset style="width:300px">
                        <legend ondblclick="update_hidden(this)">Output</legend>
                        <input type="checkbox" id="PIDX_Out" onchange="update_hidden(this)">
                        <label for="PIDX_Out">PID + FF</label>
                    </fieldset>
                </p>
                Logging rate: <label id="FFT_infoA"></label> Hz<br><br>
                Frequency resolution: <label id="FFT_infoB"></label> Hz
             </fieldset>
        </td>
        <td>
            <fieldset style="width:600px; min-height:300px" id="test_sets">
                <legend>Tests</legend>
            </fieldset>
        </td>
    </tr>
</table>

<div id="FFTPlot" style="width:1200px;height:450px"></div>

<table>
    <td style="width: 250px;"></td>
    <td>
        <fieldset style="width:300px;height:40px">
            <legend>Amplitude scale</legend>
            <input type="radio" id="ScaleLinear" name="Scale" onchange="redraw()">
            <label for="ScaleLinear">Linear</label>
            <input type="radio" id="ScaleLog" name="Scale" onchange="redraw()" checked>
            <label for="ScaleLog">dB</label>
            <input type="radio" id="ScalePSD" name="Scale" onchange="redraw()">
            <label for="ScalePSD">Power Spectral Density</label>
        </fieldset>
    </td>
    <td>
        <fieldset style="width:260px;height:40px">
            <legend>Frequency scale</legend>
            <input type="radio" id="freq_ScaleLinear" name="feq_scale" onchange="redraw()" checked>
            <label for="freq_ScaleLinear">Linear</label>
            <input type="radio" id="freq_ScaleLog" name="feq_scale" onchange="redraw()">
            <label for="freq_ScaleLog">Log</label>
            &nbsp&nbsp&nbsp&nbsp
            <input type="radio" id="freq_Scale_Hz" name="feq_unit" onchange="redraw()" checked>
            <label for="freq_Scale_Hz">Hz</label>
            <input type="radio" id="freq_Scale_RPM" name="feq_unit" onchange="redraw()">
            <label for="freq_Scale_RPM">RPM</label>
        </fieldset>
    </td>
</table>

<table><tr><td style="width:1200px">
    <h2 style="text-align:center">Step Response</h2>
</td></tr></table>

<div id="step_plot" style="width:1200px;height:450px"></div>

<table><tr><td style="width:1200px">
    <h2 style="text-align:center">PID Spectrogram</h2>
</td></tr></table>

<div id="Spectrogram" style="width:1200px;height:450px"></div>

<table>
    <td style="width: 375px;"></td>
    <td>
        <fieldset style="width:450px;height:40px">
            <legend>PID component</legend>
            <input type="radio" id="Spec_Tar" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_Tar">Target</label>

            <input type="radio" id="Spec_Act" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_Act">Actual</label>

            <input type="radio" id="Spec_Err" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_Err">Error</label>

            <input type="radio" id="Spec_P" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_P">P</label>

            <input type="radio" id="Spec_I" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_I">I</label>

            <input type="radio" id="Spec_D" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_D">D</label>

            <input type="radio" id="Spec_FF" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_FF">FF</label>

            <input type="radio" id="Spec_Out" name="Spec" onchange="redraw_Spectrogram()">
            <label for="Spec_Out">Output</label>
        </fieldset>
    </td>
</table>

</body>

<script>

    window.onerror = function(msg, url, linenumber) {
        alert('Sorry, something went wrong.\n\n' + 
              'Please try a hard reload of this page to clear its cache.\n\n' +
              'If the error persists open an issue on the GitHub repo.\n' +
              'Include a copy of the log and the following error message:\n\n' +
               msg + '\n' +
              'URL: '+ url +'\n' +
              'Line Number: '+ linenumber)
        return false
    }
    window.addEventListener('unhandledrejection', function (e) {
        throw new Error(e.reason.stack)
    })

    setup_plots()
    reset()

    function readFile(e) {
        const file = e.files[0]
        if (file == null) {
            return
        }
        let reader = new FileReader()
        reader.onload = function (e) {
            loading_call( async () => { 
                await load(reader.result)
                document.title = "PID Review: " + file.name
            })
        }
        reader.readAsArrayBuffer(file)
    }

    const open_in_update = setup_open_in("OpenIn", "fileItem", function (data) { loading_call(() => { load(data) }) })

    init_loading_overlay()

</script>
